<template>
  <div>
    <div class="header">
      <div class="header-left">
        <p class="name">{{ name }}</p>
        <div class="item-box">
          <a class="default"><span>{{ file.filename }}</span></a>
        </div>
      </div>
      <div class="header-center">
        <a class="share"></a>
        <div class="chat"></div>
        <div class="download"></div>
      </div>
      <div class="header-right">
        <div class="back">打回作业</div>
        <div class="grade">
          <el-input type="text" v-model="sore"></el-input>
        </div>
        <div>
          <el-button type="primary" style="margin-left: 10px;" @click="correctGrade()">确定</el-button>
        </div>
      </div>
    </div>
    <vue-office-docx :options="editorOptions" :src="fileUrl" style="width: 998px;
    margin-top: 103px;
    overflow: hidden;
    min-height: 1200px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid rgb(201, 201, 201);
    box-shadow: rgb(212, 212, 212) 0 0 2px 2px;"/>
  </div>
</template>

<script>
import VueOfficeDocx from '@vue-office/docx';
import {mapState} from "vuex";
import '@vue-office/docx/lib/index.css'

export default {
  components: {
    VueOfficeDocx,
    // PdfJsViewer,
  },
  data() {
    return {
      fileUrl: '',
      isDocx: false,
      isPdf: false,
      digits: "",
      name: "",
      editorOptions: {
        toolbar: true,
        width: '800px',
        height: '600px'
      },
      file: {},
      sore: ""
    };
  },
  methods: {
    fetchFileForPreview() {
      this.separate()
      let data = {
        studentNumber: this.digits,
        homeworkId: this.homeworkId,
      }
      fetch('http://localhost:8082/downloadFile', {
        method: "post",
        headers: {
          'token': localStorage.getItem("token"),
          "Content-Type": "application/json;charset=utf-8",
          "Access-Control-Allow-Origin": "*",
        },
        body: JSON.stringify(data),
      }).then(response => {
        console.log(response)
        // 根据文件类型设置标志
        // const fileType = response.headers['content-type'];
        // this.isDocx = fileType === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
        // this.isPdf = fileType === 'application/pdf';
        response.arrayBuffer().then(res => {
          this.fileUrl = res
        })
      }).catch(error => {
        console.error('请求失败:', error);
      });
    },
    separate() {
      // 使用正则表达式分离汉字和数字
      const chinesePattern = /[\u4e00-\u9fa5]+/;
      const digitsPattern = /\d+/;
      // 在输入字符串中查找汉字和数字
      const chineseMatch = this.studentNumber.match(chinesePattern);
      const digitsMatch = this.studentNumber.match(digitsPattern);
      // 根据匹配结果更新数据属性
      this.name = chineseMatch ? chineseMatch[0] : '无汉字';
      this.digits = digitsMatch ? digitsMatch[0] : '无数字';
    },
    gainFilename() {
      this.request.post("/gainFilename", {
        studentNumber: this.digits,
        homeworkId: this.homeworkId,
      }).then(res => {
        this.file = res
      })
    },
    correctGrade() {
      if (this.sore === null) {
        this.$message.error("还没有打分")
      } else {
        this.request.post("/correctGrade", {
          studentNumber: this.digits,
          homeworkId: this.homeworkId,
          sore: this.sore
        }).then(res => {
          console.log(res)
          if (res === "更新成绩成功") {
            this.$message.success(res)
          } else {
            this.$message.success(res)
          }
        })
      }
    }
  },
  mounted() {
    this.fetchFileForPreview()
    this.gainFilename()
  },
  beforeDestroy() {
    // 组件销毁时，释放Blob URL
    if (this.fileUrl) {
      URL.revokeObjectURL(this.fileUrl);
    }
  },
  computed: {
    ...mapState({studentNumber: state => state.courseInformation.studentNumber}),
    ...mapState({homeworkId: state => state.courseInformation.homeworkId}),
  }
}
</script>

<style scoped>
.header {
  z-index: 2;
  height: 73px;
  background: #333;
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  box-sizing: border-box;
}

.header-left {
  height: 73px;
  margin-left: 34px;
}

.name {
  color: #FFF;
  font-size: 18px;
  line-height: 34px;
  padding-top: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-box {
  height: 32px;
  line-height: 32px;
  position: relative;
}

.default {
  display: inline-block;
  height: 22px;
  line-height: 22px;
  vertical-align: top;
  color: #fff;
  font-size: 0;
  margin-right: 10px;
}

.default span {
  display: inline-block;
  height: 22px;
  line-height: 22px;
  font-size: 16px;
  vertical-align: top;
  background: url("https://assets.ketangpai.com/Public/Home/img/navpizhu/xlk.png") right center no-repeat;
  padding-right: 24px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share {
  float: left;
  width: 24px;
  height: 24px;
  margin-right: 38px;
  margin-top: 3px;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("https://assets.ketangpai.com/Public/Home/img/navpizhu/share2.png");
  position: relative;
}

.chat {
  margin-top: 3px;
  margin-right: 38px;
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url("https://assets.ketangpai.com/openapiv5/Public/Home/img/navpizhu/sixin.png") no-repeat 0 0 / 24px 24px;
}

.download {
  float: left;
  width: 24px;
  height: 24px;
  margin-right: 38px;
  margin-top: 3px;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("https://assets.ketangpai.com/Public/Home/img/navpizhu/xiazai.png");

}

.back {
  font-size: 14px;
  color: #fff;
  text-align: center;
  border-radius: 20px;
  float: left;
  margin-right: 20px;
  background: transparent;
  cursor: pointer;
  height: 39px;
  line-height: 39px;
}

</style>
